<template>
  <div>
    <breadcrumb :navdata="bdname"></breadcrumb>
    <div class="courseList">
      <courseList :courseItem="item" :from="from" v-for="(item,index) in courseList" :key="index"></courseList>
    </div>
  </div>
</template>

<script>
import {
  courselistByCategory
} from 'api/getData'
import breadcrumb from "basic/breadcrumb/breadcrumb"
import courseList from "basic/courselist/index"
import {
  mapGetters
} from 'vuex'
export default {
  name: "all-course",
  metaInfo: {
    title: '全部套餐-国科学院', // set a title
    meta: [{                 // set meta
      name: 'keywords',
      content: '全部套餐-国科学院,在线教育,IT人才培养,IT培训,软件开发培训,编程培训,软件工程师培训班,成都IT培训机构,程序员培训机构'
    }],
  },
  components: {
    breadcrumb,
    courseList
  },
  data() {
    return {
      bdname: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: '全部套餐',
          url: '/allCourse'
        }
      ],
      courseList: '',
      from: '4'
    }
  },
  mounted: async function () {
    this.getData()
  },
  computed: {
    ...mapGetters(['cityId']),
  },
  methods: {
    async getData() {
      let loading = this.getLoading()
      await courselistByCategory('', '', this.cityId).then(res => {
        this.courseList = res.packList
        for (let i = 0; i < this.courseList.length; i++) {
          this.courseList[i].pack.allTimes = 0
          for (let j = 0; j < this.courseList[i].pack.courses.length; j++) {
            this.courseList[i].pack.allTimes = Number(this.courseList[i].pack.allTimes) + Number(this.courseList[i].pack.courses[j].periods)
          }
        }
      })
      loading.close()
    },
  },
  watch: {
    cityId() {
      this.getData();
    }
  }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';

.courseList {
  @extend .sWidth;
  margin-top: 20px;
  margin-bottom: 100px;
}
</style>
